<template>
    <div id="home" class="pa-4">
        <h2>举报记录</h2>
        <v-data-table no-data-text="暂无举报信息" :headers="headers" :items="reports" :search="search" :loading="loading"
            loading-text="加载中...">
            <template v-slot:items="{ item }">
                <span class="mr-3"><v-icon small class="pr-1">mdi-thumb-up</v-icon>{{ item.goodCount }}</span>
                <!-- <span
                  ><v-icon small class="pr-1">mdi-thumb-down</v-icon
                  >{{ item.dislikes }}</span
                > -->
            </template>
            <template v-slot:top>
                <v-dialog v-model="dialogDelete" persistent max-width="500px">
                    <v-card>
                        <v-card-title>
                            <span class="headline">删除该视频（此操作不可逆) ?</span>
                        </v-card-title>

                        <v-card-text>
                            <v-container>
                                <v-card class="card" tile flat>
                                    <v-row no-gutters>
                                        <v-col cols="3" sm="2" md="5" lg="5">
                                            <v-img class="align-center" :src="itemToDelete.cover">
                                            </v-img>
                                        </v-col>
                                        <v-col>
                                            <div class="ml-2">
                                                <v-card-title class="pl-2 subtitle-1 font-weight-bold"
                                                    style="line-height: 1">
                                                    {{ itemToDelete.title }}
                                                </v-card-title>

                                                <v-card-subtitle class="pl-2 pt-2 pb-0" style="line-height: 1">

                                                    发布于
                                                    {{ dateFormatter(itemToDelete.createTime) }}
                                                    <br />
                                                    {{ itemToDelete.goodCount }} 点赞
                                                </v-card-subtitle>
                                            </div>
                                        </v-col>
                                    </v-row>
                                </v-card>
                            </v-container>
                        </v-card-text>

                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue darken-1" text @click="dialogDelete = !dialogDelete">取消</v-btn>
                            <v-btn :loading="deleteBtnLoading" color="blue darken-1" text
                                @click="deleteItem">永久删除</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </template>
            <template v-slot:item.actions="{ item }">
                <v-btn icon text @click.stop="deleteBtn(item)">
                    <v-icon>
                        mdi-delete
                    </v-icon>
                </v-btn>
            </template>
        </v-data-table>
    </div>

</template>

<script>
import { listReport,deleteReport } from '@/services/ReportRequest';
import { mapGetters } from "vuex";
import moment from "moment";
export default {
    data: () => ({
        closeLiveRoom: null,
        curPage: 1,
        limit: 5,
        totalPage: 0,
        loading: false,
        deleteBtnLoading: false,
        snackbar: false,
        dialogDelete: false,
        tab: null,
        search: "",
        headers: [
            {
                text: "序号",
                align: "start",
                value: "reportId",
            },
            { text: "状态", value: "status" },
            { text: "举报内容", value: "content" },
            { text: "举报时间", value: "createTime" },
            { text: "处理时间", value: "handleTime" },
            { text: "反馈", value: "feedback" },
            { text: "操作", value: "actions", sortable: false },
        ],
        reports: [],
        itemToDelete: {},
    }),
    computed: {
        ...mapGetters(['currentUser'])
    },
    methods: {
        deleteItem(){
            deleteReport(this.itemToDelete.reportId)
        },
        getReport() {
            listReport({ pageIndex: this.curPage, pageSize: this.limit })
            .then((res)=>{
                if(res.data.code==200){
                    this.reports = res.data.data.list.map(report=>{
                        let cache = report
                        cache.status = report.status?'已处理':'待处理'
                        return cache
                    })
                    this.totalPage = res.data.data.total
                }
            })
        },
        onPageChange(curPage, limit) {
            this.refreshList(curPage, limit);
        },
        refreshList(curPage = 1, limit = 10) {
            this.curPage = curPage
            this.limit = limit
            this.getReport()
        },
        deleteBtn(item) {
            this.dialogDelete = true;
            this.itemToDelete = item;
        },
        dateFormatter(date) {
            return moment(date).locale('zh-cn').fromNow();
        },
    },
    mounted() {
        this.getReport()
    },
    beforeRouteUpdate(to, from, next) {
        this.getVideos();
        next();
    },
};
</script>